<link rel="stylesheet" href="{{$base_url}}/assets/layui/css/layui.css" />
<link rel="stylesheet" href="{{$base_url}}/assets/css/backend/layout.css" />

<form class="layui-form layui-form-pane" action="">
  
  <!-- 内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性（否则会看起来比较别扭），如： -->
  <div class="layui-form-item" pane>
    <label class="layui-form-label">父级菜单</label>
    <div class="layui-input-block">
      <select name="parent" lay-verify="required">
        {{if empty($sysParentInfo)}}
        <option value="0">无父级</option>
        {{else}}
          <option value="{$sysParentInfo.sysm_id}">
          {{$sysParentInfo.sysm_name}}
          </option>
        {{/if}}
        
        {{foreach $sysMenuList as $sysMenuListItem}}
        <option value="{$sysMenuListItem.sysm_id}">
          {{if $sysMenuListItem.sysm_id != $sysItem.sysm_id}} {{$sysMenuListItem.sysm_name}}
          {{/if}}
        </option>
        {{/foreach}}
      </select>
    </div>
  </div>

  <div class="layui-form-item" pane>
    <label class="layui-form-label">菜单名</label>
    <div class="layui-input-block">
      <input
        type="text"
        name="menuname"
        required
        lay-verify="required"
        placeholder="请输入菜单名"
        autocomplete="off"
        class="layui-input"
        value="{{$sysItem.sysm_name}}"
      />
    </div>
  </div>

  <div class="layui-form-item" pane>
    <label class="layui-form-label">路径</label>
    <div class="layui-input-block">
      <input
        type="text"
        name="path"
        required
        lay-verify="required"
        placeholder="请输入路径"
        autocomplete="off"
        class="layui-input"
        value="{{$sysItem.sysm_path}}"
      />
    </div>
  </div>

  <div class="layui-form-item upload" pane>
    <input id="image" type="hidden" name="icon" value="{{$sysItem.sysm_icon}}" />
    <input type="hidden" name="id" value="{$sysItem.sysm_id}">
    <button type="button" class="layui-btn" id="icon">
      <i class="layui-icon">&#xe67c;</i>上传图片
    </button>
    <div class="preview">
      <img id="pic" src="{{$base_url}}/{{$sysItem.sysm_icon}}" alt="" />
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">排序</label>
    <div class="layui-input-block">
      <input
        type="number"
        name="sort"
        required
        lay-verify="required"
        placeholder="请输入排序"
        autocomplete="off"
        class="layui-input"
        value="{{$sysItem.sysm_sort}}"
      />
    </div>
  </div>

  <div class="layui-form-item" pane>
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formEdit">
        立即提交
      </button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

<script src="{{$base_url}}/assets/layui/layui.js"></script>
<script>
  layui.use(["upload", "jquery", "form"], function () {
    var upload = layui.upload;
    var $ = layui.jquery;
    var form = layui.form;

    //提交
    form.on("submit(formEdit)", function (data) {
      // layer.msg(JSON.stringify(data.field));
      $.post(
        "/admin/sys/edit",
        data.field,
        function (data, textStatus, jqXHR) {
          if (data.code == 1) {
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭
          }
        },
        "json"
      );
      return false;
    });

    //执行实例
    var uploadInst = upload.render({
      elem: "#icon", //绑定元素
      url: "/upload/image", // 上传接口，实际使用时改成您自己的上传接口即可。
      done: function (res) {
        //上传完毕回调
        console.log(res);
        if (res.code == 1) {
          $("#pic").attr("src", "/" + res.data);
          $("#image").attr("value", res.data);
        }
      },
      error: function () {
        //请求异常回调
      },
    });
  });
</script>
